<template>
	<view>
		<view class="header">
			<view class="header_left">
				<view class="avatar">
					<image src="../../static/imgs/avatar.png" mode=""></image>
				</view>
				<view class="account" v-if="userInfo.phone">
					{{userInfo.phone}}
				</view>
				<view v-else class="account">
					未绑定手机号
				</view>
			</view>
			<view class="sign_in">
				<button v-if="canSign==1" size="mini" type="primary" @click="sign()">签到</button>
				<button v-else size="mini">已签到</button>
			</view>
		</view>
		<view class="vip">
			<uni-card>
				<view class="vip_left">
					<h1>微雪花会员</h1>
					<view class="experience_box">
						<p>甜蜜值：{{integral}}/100</p>
						<view class="experience_bar">
							<progress :percent="pg" activeColor="#10AEFF" stroke-width="3" />
						</view>
						<view class="experience_description">
							再升一级购物可享{{userInfo.nextDiscount*100}}折优惠~
						</view>
					</view>
				</view>
				<view class="vip_right" @click="showDrawer('showLeft')">
					<view class="vip_logo">
						<image src="../../static/logo.png" mode=""></image>
					</view>
					<p>查看权益 ></p>
				</view>
			</uni-card>
		</view>

		<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
			<view class="box">
				<view class="title">
					VIP权益
				</view>
				<ul>
					<li v-for="(item,index) in vipList" :key="index"
						:style="{'background-color':index%2==0?'#abb2bf':'#919191'}">
						<view class="box_vip">
							VIP:{{item.vip}}
						</view>
						<view class="box_discount">
							{{item.discount}}折
						</view>
					</li>

				</ul>
			</view>
		</uni-drawer>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pg: 1,
				userInfo: uni.getStorageSync("userInfo"),
				canSign: 1,
				integral: 0,
				vipList: [{
						vip: 1,
						discount: 10
					},
					{
						vip: 2,
						discount: 9.8
					}, {
						vip: 3,
						discount: 9.3
					}, {
						vip: 4,
						discount: 8.8
					}, {
						vip: 5,
						discount: 8.2
					}, {
						vip: 6,
						discount: 7.7
					}, {
						vip: 7,
						discount: 7
					}, {
						vip: 8,
						discount: 6.5
					}, {
						vip: 9,
						discount: 6
					}
				]
			};
		},
		onLoad() {
			this.initSign()
		},
		methods: {
			//签到
			async sign() {
				let {
					phone
				} = uni.getStorageSync("userInfo")
				let params = {
					phone: phone
				}
				let res = await uni.$http.user.reqSignIn(params)
				if (res.code == "200") {
					uni.showToast({
						title: "经验+1",
						icon: 'success'
					})
					this.pg++
					this.integral++
					this.canSign = 0
				}
			},

			initSign() {
				this.integral = this.userInfo.integral
				this.pg = this.userInfo.integral
				this.canSign = this.userInfo.canSign
			},

			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			}

		},
		async onPullDownRefresh() {
			let res = await uni.$http.user.login()
			if (res) {
				this.initSign()
				uni.stopPullDownRefresh()
			}
		}


	}
</script>

<style lang="less">
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 7px;

		.header_left {
			display: flex;
			align-items: center;
		}

		.avatar {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.account {
			margin-left: 8px;
		}
	}

	.vip {
		.uni-card__content {
			display: flex;
			justify-content: space-between;
			align-items: center;

		}

		.vip_left {
			width: 60%;
			display: flex;
			flex-direction: column;

			h1 {
				font-size: 20px;
				margin: 10px 0;
			}

			.experience_box {
				margin-top: 8px;
				font-size: 12px;

				.experience_description {
					margin-top: 4px;
				}
			}
		}

		.vip_right {
			margin-right: 8px;
			font-size: 12px;

			image {
				width: 55px;
				height: 55px;
			}


		}
	}

	.box {
		// padding: 10px;

		.title {
			font-size: 18px;
			margin-bottom: 10px;
			// color: #e60012;
			line-height: 30px;
		}

		li {
			height: 30px;
			display: flex;
			padding: 10px;
			line-height: 30px;
			// color: greenyellow;
			justify-content: space-between;
		}
	}



	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text {
		font-size: 14px;
		color: #333;
	}
</style>
